<template>
  <div>
    <e-table
      class="data-table"
      ref="eTable"
      @getList="handleGetList"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :pageObj="null"
      :border="false"
      :rowKey="'categoryId'"
      :treeProps="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column slot="action" fixed="right" width="50" align="center">
        <template slot-scope="scope">
          <el-dropdown>
            <a class="el-dropdown-link">
              <i class="el-icon-menu"></i>
            </a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="$auth('assets:update')"
                @click.native="handleEdit(true, scope.row)"
              >
                <a>编辑</a>
              </el-dropdown-item>
              <el-dropdown-item
                v-if="$auth('assets:delete')"
                @click.native="handleDelete(scope.row)"
              >
                <a class="red">删除</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </e-table>
  </div>
</template>

<script>
import { categoryDelete, categoryPage } from '@/api/assetsNew'
import { openNotification } from '@/utils/util'

export default {
  data() {
    return {
      tableData: [],
      loading: false,
      columns: [
        {
          label: '分类ID',
          prop: 'categoryId',
          align: 'left',
          width: 200
        },
        {
          label: '分类名称',
          prop: 'categoryName',
          align: 'left'
        },
        {
          label: '折旧年限',
          prop: 'serviceLife',
          width: '80px',
          align: 'right'
        },
        { slot: 'action' }
      ]
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    handleEdit(bool, obj) {
      this.$emit('edit', bool, obj)
    },
    // arr1是传递进来的迭代数据，arr2是请求到的数据
    handleData(arr1, arr2) {
      arr1.map(v => {
        v.children = []
        arr2.map(j => {
          if (v.categoryId === j.parentId) {
            v.children.push(j)
            if (v.children && v.children.length > 0) {
              this.handleData(v.children, arr2)
            }
          }
        })
      })
    },
    async handleGetList(param = {}) {
      this.loading = true
      const res = await categoryPage()
      if (res && res.data.length > 0) {
        const { state, data } = res
        let parentArr = []
        data.map(v => {
          if (!v.parentId) {
            parentArr.push(v)
          }
        })
        this.handleData(parentArr, data)
        this.tableData = parentArr
      } else {
        this.tableData = []
      }
      this.loading = false
    },
    handleDelete(row) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.categoryName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await categoryDelete(row.categoryId, {})
          openNotification('success', '删除成功')
          _this.handleGetList()
        }
      })
    }
  }
}
</script>
